<template>
  <div class="main">
    <img class="bg" src="@/assets/img/login-bg.jpg" alt="bg" />
    <div class="container">
      <div class="logo-card">
        <h1 class="logo">
          <img src="@/assets/img/logo.png" alt="logo" />
        </h1>
        <img
          class="logo-description"
          src="@/assets/img/logo-description.png"
          alt="logo-description"
        />
      </div>
      <div class="login-card">
        <div class="bg-filter"></div>
        <div class="login-title">
          <div class="login-title-desc">欢迎使用蓝宸硬件平台</div>
          <h1>登录</h1>
        </div>
        <el-form class="form" ref="form" :rules="rules" :model="form">
          <el-form-item label="账号" prop="account">
            <el-input v-model="form.account"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="form.password"></el-input>
          </el-form-item>
          <div class="tips">
            <a href="/register">新用户注册</a>
            <a href="/resetPassword">忘记密码</a>
          </div>
          <el-button class="submit-btn" @click="submit">登录</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    form: {
      account: 'admin',
      password: undefined,
    },
    rules: {
      account: [{ required: true, message: '请填写内容' }],
      password: [{ required: true, message: '请填写内容' }],
    },
  }),
  methods: {
    async submit () {
      try {
        await this.$refs.form.validate();
        localStorage.setItem('IS_LOGIN', 1);
        this.$router.push('/home');
      } catch (error) {
        error && this.$message.error(error);
      }
    },
  },
};
</script>

<style scoped lang="less">
.main {
}
.container {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(
    89deg,
    #313039 0%,
    #313039 24%,
    rgba(49, 48, 57, 0.53) 100%
  );

  /deep/.el-form-item__label {
    color: rgba(255, 255, 255, 0.2);
    font-size: 0.2rem;
  }

  /deep/.el-input__inner {
    background-color: transparent;
    color: #fff;
    font-size: 0.16rem;
    border: 2px solid rgba(255, 255, 255, 0.2);

    &:focus,
    &:hover {
      border: 2px solid rgba(255, 255, 255, 0.6);
    }
  }
}

.bg {
  position: absolute;
  top: 0;
  // left: 500px;
  width: 100%;
  height: 100%;
}

.login-card {
  position: relative;
  width: 5.39rem;
  height: 7rem;
  padding: 0.55rem;
  border-radius: 0.15rem;
  box-shadow: 0px 0px 0.2rem rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;

  .tips {
    margin-top: 0.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    a {
      font-size: 0.16rem;
      text-decoration: none;
      color: #ffffff;
      opacity: 0.4;

      &:hover {
        opacity: 0.6;
      }
    }
  }

  .bg-filter {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(5px);
    background-color: rgba(0, 0, 0, 10%);
  }

  .form {
    position: relative;
    z-index: 2;
    background-color: transparent;
  }

  .submit-btn {
    margin-top: 1.35rem;
    width: 100%;
    font-size: 0.24rem;
    color: #fff;
    background: linear-gradient(40deg, #184196 0%, #00a2e9 100%);
    border: none;
  }
}

.login-title {
  &-desc {
    font-size: 0.16rem;
    color: #fff;
    opacity: 0.4;
    margin-bottom: 0.2rem;
  }

  h1 {
    font-size: 0.36rem;
    color: #fff;
    margin-bottom: 0.3rem;
  }
}

.logo-card {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  margin-right: 3.68rem;

  .logo {
    display: flex;
    justify-content: center;
    align-content: center;
    margin-bottom: 0.46rem;

    img {
      width: 1.37rem;
      height: 1.37rem;
    }
  }

  .logo-description {
    width: 3.65rem;
    height: 1.26rem;
  }
}
</style>
